<template>
  <div class="bg">
    <div class="login-logo">
      <img src="@/assets/logo.png" alt="logo" class="logo-img" />
      <div class="logo-text">
        <div class="logo-title">小白盒</div>
        <div class="logo-en">WhiteBox</div>
      </div>
    </div>
    <div class="login-box">
      <form class="register-form" @submit.prevent="handleRegister">
        <div class="register-title">欢 迎 注 册</div>
        <div class="input-group">
          <input type="text" v-model="form.username" placeholder="账号" required pattern="^[a-zA-Z0-9_]{2,16}$" />
        </div>
        <div class="input-group">
          <input type="text" v-model="form.phone" placeholder="手机号" required pattern="^\d{11}$" />
        </div>
        <div class="input-group">
          <input type="email" v-model="form.email" placeholder="邮箱" required />
        </div>
        <div class="input-group">
          <input type="password" v-model="form.password" placeholder="密码" required minlength="6" />
        </div>
        <div class="input-group">
          <input type="password" v-model="form.confirmPassword" placeholder="确认密码" required @blur="checkPassword" />
        </div>
        <button type="submit" class="register-btn">注册</button>
        <div class="login-link-row">
          <span>已有账号？请</span>
          <button type="button" class="login-link" @click="goToLogin">登录</button>
        </div>
      </form>
    </div>
    <div class="footer-desc">
      <div class="footer-title">小白盒</div>
      <div class="footer-sub">最受欢迎的中文社区</div>
      <div class="footer-en">White Box</div>
    </div>
    <div v-if="showToast" class="custom-toast">{{ toastMsg }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const form = ref({
  username: '',
  phone: '',
  email: '',
  password: '',
  confirmPassword: ''
});
const router = useRouter();

// 新增提示框相关
const toastMsg = ref('');
const showToast = ref(false);
const showToastMsg = (msg) => {
  toastMsg.value = msg;
  showToast.value = true;
  setTimeout(() => {
    showToast.value = false;
  }, 1000);
};

const checkPassword = () => {
  if (form.value.password && form.value.confirmPassword && form.value.password !== form.value.confirmPassword) {
    showToastMsg('两次输入的密码不一致');
    form.value.confirmPassword = '';
  }
};

const handleRegister = async () => {
  if (!form.value.username || !form.value.phone || !form.value.email || !form.value.password || !form.value.confirmPassword) {
    showToastMsg('请填写完整信息');
    return;
  }
  if (form.value.password !== form.value.confirmPassword) {
    showToastMsg('两次输入的密码不一致');
    return;
  }
  try {
    const response = await axios.post('/login_register/register', form.value);
    if (response.data.success) {
      showToastMsg('注册成功');
      setTimeout(() => {
        router.push('/login');
      }, 1000);
    } else {
      showToastMsg('注册失败: ' + (response.data.message || '未知错误'));
    }
  } catch (e) {
    showToastMsg('注册失败: ' + (e.response?.data?.message || e.message));
  }
};

const goToLogin = () => {
  router.push('/login');
};
</script>

<style>
.bg {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-image: url("../assets/bg.png");
  background-size: cover;
}
.login-logo {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  z-index: 100;
}
.logo-img {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.logo-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
}
.logo-en {
  font-size: 12px;
  letter-spacing: 1px;
  color: #bbb;
}
.login-box {
  min-width: 400px;
  max-width: 480px;
  height: auto;
  background-color: #ececec;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-left: 650px;
  padding: 32px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.register-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.register-title {
  font-weight: bold;
  font-size: 25px;
  margin-bottom: 10px;
  text-align: left;
  color: #23272b;
}
.input-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  background: #fff;
  outline: none;
  transition: border 0.2s;
}
.input-group input:focus {
  border: 1.5px solid #23272b;
}
.register-btn {
  width: 100%;
  background: linear-gradient(180deg, #23272b 0%, #43484d 100%);
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  font-size: 19px;
  padding: 10px 0;
  margin-top: 8px;
  cursor: pointer;
  transition: background 0.2s, filter 0.2s;
}
.register-btn:hover {
  filter: brightness(1.15);
}
.login-link-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
  gap: 6px;
}
.login-link {
  color: #fff;
  background: linear-gradient(180deg, #23272b 0%, #43484d 100%);
  border-radius: 8px;
  padding: 4px 18px;
  font-weight: bold;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.login-link:hover {
  background: linear-gradient(180deg, #43484d 0%, #23272b 100%);
}
.login-link-row span {
  color: #23272b;
  font-size: 16px;
}
.footer-desc {
  position: absolute;
  left: 32px;
  bottom: 130px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  z-index: 100;
}
.footer-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}
.footer-sub {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 6px;
}
.footer-en {
  font-size: 15px;
  color: #bbb;
}
.custom-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 18px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: none;
  animation: fadeInOut 1s;
}
@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}
</style>



